import React, { FC, useReducer, useContext } from "react"
// import reducer from "./reducer"
// import initialState from "./store"
import { TodoContext } from "."

const List: FC = () => {
  // const [state, dispatch] = useReducer(reducer, initialState)
  const [state, dispatch] = useContext(TodoContext)
  // dele函数将type和payload传到reducer函数里边，然后去判断
  function dele(id: string) {
    dispatch({ type: "delete", payload: id })
  }

  return (
    <ul>
      {state.map((todo) => (
        <li key={todo.id}>
          <span>{todo.title}</span>
          <button onClick={() => dele(todo.id)}>删除</button>
        </li>
      ))}
    </ul>
  )
}

export default List
